<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles/reset.css">
    <link rel="stylesheet" href="./styles/index.css">
    <script src="./vue.js"></script>
    <style>
        #app{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        #app .header,
        #app .footer{
            width: 7.5rem;
            height: 0.8rem;
            line-height: 0.8rem;
            background-color: grey;
            text-align: center;
        }

        #app .footer{
            display: flex;
        }
        #app .footer a{
            flex: 1;
            text-align: center;
        }

        #app .main{
            flex: 1;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="header">头部</div>
        <component class="main" :is="showComp"></component>
        <div class="footer">
            <a @click="showComp='HomeView'">主页</a>
            <a @click="showComp='ListView'">列表页</a>
            <a @click="showComp='CarView'">购物车</a>
            <a @click="showComp='MineView'">我的</a>
        </div>
    </div>
</body>
<script>

    /*  
        单页面应用: 
            1. 以移动端为例, 页面布局常见为上中下三栏布局, 头尾经常可以复用, 只有中间部分进行切换
            2. 在学习Vue组件化和动态组件以后, 不用将中间部分,单独写一个页面, 而是拆分成个个组件, 使用组件动态切换即可
            3. 切换为单页面应用之后, 通篇只有一个页面, 其他的都是根组件的子(代)组件,  => 问题: 此时页面每次刷新,组件重新挂载, 都会回到初始页
    
    
    
    */

    let HomeView = {
        template:`<div class="home">这是主页</div>`,
    }
    let ListView = {
        template:`<div class="list">这是列表页</div>`,
    }
    let CarView = {
        template:`<div class="car">这是购物车页</div>`,
    }
    let MineView = {
        template:`<div class="mine">这是个人页</div>`,
    }


    var vm = new Vue({
        el:"#app",
        data:{
            showComp:"HomeView"
        },
        components: {
            HomeView:HomeView,
            ListView:ListView,
            CarView:ListView,
            MineView:CarView
        }
    })


    
</script>
</html>